第二十天：Promise 的基本用法

昨天的文章裡有提到 Promise，今天則再多探討一些。

1. Promise 是什麼？

Promise 是 JavaScript 用來處理非同步操作的一個物件。它表示一個尚未完成的操作，並且最終會返回一個值（成功或失敗）。Promise 有三種狀態：

• pending（等待中）：Promise 剛被創建時的初始狀態。
• fulfilled（已完成）：操作成功完成，並且返回一個結果。
• rejected（已拒絕）：操作失敗，並且返回一個錯誤。

2. Promise 的語法

let promise = new Promise(function(resolve, reject) {
// 執行非同步操作
let success = true;

if (success) {
resolve("操作成功！");
} else {
reject("操作失敗！");
}
});

• resolve()：當操作成功時被調用，將 Promise 狀態改為 fulfilled。
• reject()：當操作失敗時被調用，將 Promise 狀態改為 rejected。

3. 使用 then() 和 catch()

Promise 的兩個主要方法是 then() 和 catch()，用來分別處理成功和失敗的結果。

• then()：處理成功的結果。
• catch()：處理錯誤（Promise 被拒絕的情況）。

範例：

let promise = new Promise(function(resolve, reject) {
let success = true;

if (success) {
resolve("操作成功！");
} else {
reject("操作失敗！");
}
});

promise
.then(function(result) {
console.log(result); // 當操作成功時，輸出 "操作成功！"
})
.catch(function(error) {
console.log(error); // 當操作失敗時，輸出 "操作失敗！"
});

在這個範例中，then() 處理成功的結果，catch() 處理錯誤。

4. Promise 的鏈式操作

Promise 可以進行 鏈式調用，讓多個非同步操作按順序進行。每個 then() 都會返回一個新的 Promise，允許後續進行鏈式調用。

範例：

let promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("第一步完成");
}, 1000);
});

promise
.then(function(result) {
console.log(result); // "第一步完成"
return "第二步完成";
})
.then(function(result) {
console.log(result); // "第二步完成"
return "第三步完成";
})
.then(function(result) {
console.log(result); // "第三步完成"
});

在這裡，第一步操作完成後，接著進行第二步、第三步，結果依次被打印出來。

5. Promise.all()

當需要同時執行多個 Promise，並在所有 Promise 都完成後執行某些操作時，可以使用 Promise.all()。它會等待所有 Promise 都完成，然後返回所有結果。

範例：

let promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("第一個 Promise 完成");
}, 2000);
});

let promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("第二個 Promise 完成");
}, 1000);
});

Promise.all([promise1, promise2]).then(function(results) {
console.log(results); // ["第一個 Promise 完成", "第二個 Promise 完成"]
});

這裡，Promise.all() 等待兩個 Promise 都完成後，將它們的結果以數組的形式返回。

6. Promise.race()

Promise.race() 與 Promise.all() 類似，但它只會返回第一個完成的 Promise 的結果，不論是成功還是失敗。

範例：

let promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("第一個 Promise 完成");
}, 3000);
});

let promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("第二個 Promise 完成");
}, 1000);
});

Promise.race([promise1, promise2]).then(function(result) {
console.log(result); // "第二個 Promise 完成"
});

這裡，因為第二個 Promise 更快完成，所以 Promise.race() 返回了第二個 Promise 的結果。